<!--
    用法:
    <func-vbar v-on:setIndex="setIndex" :bars="bars" :hide="hide"></func-vbar>
    setIndex 将当前选中坐标传回。
    bars 传递信息进入
    hide 用于控制仅仅显示一个功能图标。
    vertical bar
  -->
<template>
  <div class="func-vbar">
    <div
      v-for="(item, k) in bars" :key="k"
      @click="setIndex(k)" :class="suppleTabClass(k)">
        <v-btn x-small plain v-show="index == k || !hide" elevation="0" >
          <v-badge v-if="item.notify" dot overlap color="red accent-3">
            <v-icon :color="item.color">{{item.icon}}</v-icon>
          </v-badge>
          <v-icon v-else :color="item.color">{{item.icon}}</v-icon>
        </v-btn>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
    };
  },
  props:["bars", "hide"],
  methods: {
    setIndex(index) {
      this.index = index;
      this.$emit("setIndex", index);
    },
    suppleTabClass(index) {
      return (this.index == index) ? "suppletab tab-selected" : "suppletab";
    },
  },
};
</script>
<style lang="scss" scoped>
.func-vbar {
  -webkit-app-region: no-drag;
  position:absolute;
  right:0;
  top:0;
  // width:50px;
  padding:10px;
  // height:100vh;
  overflow: hidden;
  .v-chip.v-size--default::v-deep {
    // border-radius: 0 !important;
  }
}
.v-chip.v-size--default {
  .v-icon::v-deep {
    font-size: 18px;
    height: 16px !important;
    width: 24px !important;
  }
}
.theme--light.v-chip:not(.v-chip--active) {
  background: transparent;
}
.tool-tip{
  font-size:12px !important;
  color:#aaaa !important;
}
</style>
